<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
            float: left;
            width: 300px;
            height: 300px;
            /* 添加渐变：渐变需要使用bcakground */
            /* liner-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...) */
            /* 方向：(推荐使用角度 只能填一种)
                    to top/0deg
                    to right/90deg
                    to bottom/180deg
                    to left:270deg */
            background: linear-gradient(30deg,red 0%,blue 30%,pink 60%,yellow);
        }
        .div2 {
            float: left;
            width: 300px;
            height: 200px;
            /* radial-gradient(形状 渐变半径大小 坐标,颜色1,颜色2,颜色3) */
            /* 形状：circle 圆形   ellipse(默认):适配当前形状 
               位置：默认在正中心 可以赋值坐标(参照左上角)
               渐变半径大小：closest-side/corner:最近边/角  farthest-side/corner:最远边/角  默认在最远的角*/
            background: radial-gradient(circle farthest-side at 50px 50px,red,blue,yellow);
        }
        .div3 {
            float: left;
            width: 300px;
            height: 200px;
            background: repeating-radial-gradient(circle farthest-side at center center,
                                                                    white 0%,white 10%,
                                                                    black 10%,black 20%);
        }
        .div4 {
            float: left;
            width: 300px;
            height: 300px;
            background: repeating-linear-gradient(30deg,white 0%,
                                                        white 10%,
                                                        black 10%,
                                                        black 20%);
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    
</body>
</html>